<%@ page import="com.zl.customer.pojo.Customer" %>
<%@ page import="java.util.List" %>
<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>客户列表</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style type="text/css">
	.curr{
		background-color: blue;
		padding:5px;
		color:#FFF;
		font-size:14px;
		
	}
</style>
	<%--<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/jquery.js"></script>--%>
	<%--<script type="text/javascript" src="<%=request.getContextPath() %>/jquery/jquery.js"></script>--%>
	<script type="text/javascript" src="<c:url value="/jquery/jquery.js"/>"></script>
	<script type="text/javascript">
		$(function(){

		    $("#delBtn").click(function(){
               // var arr = [];
				//发送一个请求给后台:  同步请求  location.href=""    ajax请求 $.get()
				//对应foreach循环
				var queryString = "";
				$(".c_id").each(function(i,ele){
				    // ele 是js对象   把js对象转换jquery对象
					//console.log(i,ele);
					//console.log($(ele).prop("checked"));
					if($(ele).prop("checked")){
                        //arr.push($(ele).val());
                        queryString+="ids="+$(ele).val()+"&";
					}
				});
				//if(arr.length == 0){
				if(queryString.length == 0){
					alert("请选择需要删除的客户");
				}else{
				    //发送请求给后台
					//http://localhost:8888/customer/deleteByIds.do?ids=182&ids=10
					//deleteByIds.do?ids=182&ids=10
                    queryString =  queryString.substring(0,queryString.lastIndexOf("&"));
                    location.href="${pageCotext.request.contextPath}/customer/deleteByIds.do?"+queryString;
                }
			});
		});
	</script>
</head>

<body>
	<h3 align="center">客户列表</h3>
	<table border="1" width="70%" align="center">
		<tr>
			<th><button id="delBtn" type="button">批量删除</button></th>
			<th>客户姓名</th>
			<th>性别</th>
			<th>生日</th>
			<th>手机</th>
			<th>邮箱</th>
			<th>描述</th>
			<th>头像</th>
			<th>操作</th>
		</tr>
		<tbody>
		   <c:forEach items="${pages.datas}" var="c" varStatus="vs">
			   <tr <c:if test="${vs.index % 2 == 0}"> style="background-color: #0a6397;" </c:if>>
				   <td><input type="checkbox" name="ids" value="${c.cid}" class="c_id"/></td>
				   <td>${c.cname}</td>
				   <td>${c.sex}</td>
				   <%--<td>${c.brithday}</td> --%> <!--yyyy年MM月dd日:  SimpleDateFormat-->
				   <td><fmt:formatDate value="${c.brithday}" pattern="yyyy年MM月dd日"/></td>
				   <td>${c.cellphone}</td>
				   <td>${c.email}</td>
				   <td>${c.description}</td>
				   <td>
					   <c:choose>
						   <c:when test="${empty c.photo}">
							   <img src="${pageContext.request.contextPath}/Images/Student/photo.jpg" width="50" height="50"/>
						   </c:when>
						   <c:otherwise>
							   <img src="/upload/${c.photo}"  width="50" height="50"/>
						   </c:otherwise>

					   </c:choose>

				   </td>
				   <td>
				   <a href="${pageContext.request.contextPath}/queryCustomerById.action?cid=${c.cid}">编辑</a>
				   <a href="${pageContext.request.contextPath}/delCustomer.action?cid=${c.cid}">删除</a>
				   </td>
			   </tr>
		   </c:forEach>
		</tbody>
		<tfoot>
			<!--显示页码 -->
			<tr>
				<td colspan="7" align="center">
					  <c:choose>
						  	<c:when test="${pages.pageIndex <= 1}">
								<span>首页</span>
								<span>上一页</span>
							</c:when>
						    <c:otherwise>
								<a href="javascript:void(0);" data-pi="1">首页</a>
								<a href="javascript:void(0);" data-pi="${pages.pageIndex - 1}">上一页</a>
							</c:otherwise>
					  </c:choose>

					  <c:choose>
						  <c:when test="${pages.totalPages < 5}">
							  <c:set var="start" value="1"/>
							  <c:set var="end" value="${pages.totalPages}"/>
						  </c:when>
						  <c:otherwise>
							  <c:set var="start" value="${pages.pageIndex -1}"/>
							  <c:set var="end" value="${pages.pageIndex +3}"/>
							  <c:if test="${start < 1}">
								  <c:set var="start" value="1"/>
								  <c:set var="end" value="5"/>
							  </c:if>
							  <c:if test="${end > pages.totalPages}">
								  <c:set var="end" value="${pages.totalPages}"/>
								  <c:set var="start" value="${end - 4}"/>
							  </c:if>
						  </c:otherwise>
					  </c:choose>
					 <!--循环输出页码-->
					 <c:forEach var="i" begin="${start}" end="${end}">
						 <c:choose>
							 <c:when test="${pages.pageIndex == i}">
								 <span>${i}</span>
							 </c:when>
							 <c:otherwise>
								 <a href="javascript:void(0);" data-pi="${i}">${i}</a>
							 </c:otherwise>
						 </c:choose>

					 </c:forEach>
					<c:choose>
						<c:when test="${pages.pageIndex >= pages.totalPages}">
							<span>下一页</span>
							<span>最后一页</span>
						</c:when>
						<c:otherwise>
							<a href="javascript:void(0);" data-pi="${pages.pageIndex + 1}">下一页</a>
							<a href="javascript:void(0);" data-pi="${pages.totalPages}">最后一页</a>
						</c:otherwise>
					</c:choose>

				</td>
			</tr>

		</tfoot>
	</table>
	<script type="text/javascript">
			$("tfoot a").click(function(){
				//alert($(this).data("pi"));
				//把点击的那个超链接的绑定pi数据填充给name为pageIndex的表单项
				$("#pi").val($(this).data("pi"));
				//提交表单
				$("#queryForm").submit();
			});
	</script>
	<%-- ${pages.pageIndex }: 当前显示的页码 --%>
	<form id="queryForm" action="${pageContext.request.contextPath }/customer/queryCustomerByCondition.do" method="post">
	   <input type="hidden"  id="pi" value="${pages.pageIndex }" name="pageIndex" /><!--用户需要查询的页码-->
	   <input type="hidden"  value="${condition.customer.cname }" name="customer.cname" />
	   <input type="hidden"  value="${condition.customer.sex }" name="customer.sex"/>
	   <input type="hidden"  value="${condition.customer.cellphone }" name="customer.cellphone" />
	   <input type="hidden"  value="${condition.customer.email }" name="customer.email"/>
	</form>
</body>
</html>
